<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="free-educational-responsive-web-template-webEdu">
    <meta name="author" content="webThemez.com">
    <title>相关视频</title>
    <link rel="favicon" href="assets/images/favicon.png">
    <link rel="stylesheet" media="screen" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <!-- Custom styles for our template -->
    <link rel="stylesheet" href="assets/css/bootstrap-theme.css" media="screen">
    <link rel="stylesheet" type="text/css" href="assets/css/isotope.css" media="screen" />
    <link rel="stylesheet" href="assets/js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
	<script src="assets/js/html5shiv.js"></script>
	<script src="assets/js/respond.min.js"></script>
	<![endif]-->
</head>

<body>
    <!-- Fixed navbar -->
    <div id="navbar" class="navbar navbar-inverse">
    </div>
    <!-- /.navbar -->

    <header id="head" class="secondary">
        <div class="container">
            <h1>相关视频</h1>
            <p>Related Videos</p>
        </div>
    </header>


    <!-- container -->
    <section class="container">
        <div class="row">
            <div class="col-md-12">
                <section id="portfolio" class="page-section section appear clearfix">
                    <br />
                    <br />
                    <p>
                        以下是一些关于自动驾驶汽车发展、最新研究以及落地产品的相关视频。
                        <br />
                        <br />
                    </p>


                    <div class="row">
                        <nav id="filter" class="col-md-12 text-center">
                            <ul>
                                <li><a href="#" class="current btn-theme btn-small" data-filter="*">全部视频</a></li>
                                <li><a href="#" class="btn-theme btn-small" data-filter=".webdesign">技术发展</a></li>
                                <li><a href="#" class="btn-theme btn-small" data-filter=".photography">最新研究</a></li>
                                <li><a href="#" class="btn-theme btn-small" data-filter=".print">落地产品</a></li>
                            </ul>
                        </nav>
                        <div class="col-md-12">
                            <div class="row">
                                <div class="portfolio-items isotopeWrapper clearfix" id="3">

                                    <article class="col-sm-4 isotopeItem webdesign">
                                        <div class="portfolio-item">
                                            <img src="assets/images/portfolio/img1.jpg" alt="" />
                                            <div class="portfolio-desc align-center">
                                                <div class="folio-info">
                                                    <a href="assets/images/portfolio/img1.jpg" class="fancybox">
                                                        <h5>Project Title</h5>
                                                        <i class="fa fa-link fa-2x"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </article>

                                    <article class="col-sm-4 isotopeItem photography">
                                        <div class="portfolio-item">
                                            <img src="assets/images/portfolio/img2.jpg" alt="" />
                                            <div class="portfolio-desc align-center">
                                                <div class="folio-info">
                                                    <a href="assets/images/portfolio/img2.jpg" class="fancybox">
                                                        <h5>Project Title</h5>
                                                        <i class="fa fa-link fa-2x"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </article>


                                    <article class="col-sm-4 isotopeItem photography">
                                        <div class="portfolio-item">
                                            <img src="assets/images/portfolio/img3.jpg" alt="" />
                                            <div class="portfolio-desc align-center">
                                                <div class="folio-info">
                                                    <a href="assets/images/portfolio/img3.jpg" class="fancybox">
                                                        <h5>Project Title</h5>
                                                        <i class="fa fa-link fa-2x"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </article>

                                    <article class="col-sm-4 isotopeItem print">
                                        <div class="portfolio-item">
                                            <img src="assets/images/portfolio/img4.jpg" alt="" />
                                            <div class="portfolio-desc align-center">
                                                <div class="folio-info">
                                                    <a href="assets/images/portfolio/img4.jpg" class="fancybox">
                                                        <h5>Project Title</h5>
                                                        <i class="fa fa-link fa-2x"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </article>

                                    <article class="col-sm-4 isotopeItem photography">
                                        <div class="portfolio-item">
                                            <img src="assets/images/portfolio/img5.jpg" alt="" />
                                            <div class="portfolio-desc align-center">
                                                <div class="folio-info">
                                                    <a href="assets/images/portfolio/img5.jpg" class="fancybox">
                                                        <h5>Project Title</h5>
                                                        <i class="fa fa-link fa-2x"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </article>

                                    <article class="col-sm-4 isotopeItem webdesign">
                                        <div class="portfolio-item">
                                            <img src="assets/images/portfolio/img6.jpg" alt="" />
                                            <div class="portfolio-desc align-center">
                                                <div class="folio-info">
                                                    <a href="assets/images/portfolio/img6.jpg" class="fancybox">
                                                        <h5>Project Title</h5>
                                                        <i class="fa fa-link fa-2x"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </article>

                                    <article class="col-sm-4 isotopeItem print">
                                        <div class="portfolio-item">
                                            <img src="assets/images/portfolio/img7.jpg" alt="" />
                                            <div class="portfolio-desc align-center">
                                                <div class="folio-info">
                                                    <a href="images/portfolio/img7.jpg" class="fancybox">
                                                        <h5>Project Title</h5>
                                                        <i class="fa fa-link fa-2x"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </article>

                                    <article class="col-sm-4 isotopeItem photography">
                                        <div class="portfolio-item">
                                            <img src="assets/images/portfolio/img8.jpg" alt="" />
                                            <div class="portfolio-desc align-center">
                                                <div class="folio-info">
                                                    <a href="images/portfolio/img8.jpg" class="fancybox">
                                                        <h5>Project Title</h5>
                                                        <i class="fa fa-link fa-2x"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </article>

                                    <article class="col-sm-4 isotopeItem print">
                                        <div class="portfolio-item">
                                            <img src="assets/images/portfolio/img9.jpg" alt="" />
                                            <div class="portfolio-desc align-center">
                                                <div class="folio-info">
                                                    <a href="images/portfolio/img9.jpg" class="fancybox">
                                                        <h5>Project Title</h5>
                                                        <i class="fa fa-link fa-2x"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </article>
                                </div>

                            </div>


                        </div>
                    </div>

                </section>
            </div>
        </div>

    </section>
    <!-- /container -->
    <footer id="footer"> </footer>


    <!-- JavaScript libs are placed at the end of the document so the pages load faster -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <script src="assets/js/jquery.cslider.js"></script>
    <script src="assets/js/jquery.isotope.min.js"></script>
    <script src="assets/js/fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>
    <script src="assets/js/custom.js"></script>
    <script>
        $(function () {
            //公共资源
            $('#navbar').load('./public/navbar.html', function() {
                $('#videos').addClass('active');
            });
            $('#footer').load('./public/footer.html');
        });
    </script>
</body>

</html>